<template>
    <page-frame class="expand-wait">
        <template #header-title>
            <span :style="{ color: pageInfoProperty.button.ok }">
                {{ pageInfoProperty.title }}
            </span>
        </template>
        <div class="main main-body-style1">
            <div class="title-category box-b p-l8 m-b5">
                <div class="category-title c6"> {{ pageInfoProperty.categoryText }} </div>
            </div>
            <check-list-box v-if="info.list" v-model:check-info="info.reason" v-model:check-other-info="info.reason_other" :list="info.list"
                itemKey="content"></check-list-box>

            <div class="f-b box-b p-l10 p-r10 m-t10">
                <van-button type="primary" class="w4 " plain round :color="pageInfoProperty.button.cancel" size="small"
                    @click="goBackOrForward(-1)">返回</van-button>
                <van-button type="primary" class="w4 " round :color="pageInfoProperty.button.ok" size="small"
                    @click="submitOrder()">确定</van-button>
            </div>
        </div>
    </page-frame>
</template>
<script lang="ts">

import PageBase from '@/views/mixins/page-base';
import { PendingApi, type PostCancelOrTrans } from '@/apis/pending/pending';
import CheckListBox from '@/views/expand/components/check-list/index.vue';
import { PageFrame } from '@/importComponents';
import { Dialog, Notify, Toast } from 'vant';
import { type RequestCode } from '@/server/base';
type DetailInfo = {
    id: string,
    short: string,
    prod: string,
    contents: {
        [x: string]: any,
    }
}
export default {
    mixins: [PageBase],
    components: {
        CheckListBox, PageFrame
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            info: {} as { [x: string]: any }
        }
    },
    computed: {
        item(): DetailInfo {
            const itemStr: any = this.$route.params.value;
            return this.getParamsByString(itemStr);
        },
        isCancel(): boolean {
            return this.$route.params.type == 'cancel';
        },
        pageInfoProperty(): {
            title: string,
            button: { ok: string, cancel: string },
            categoryText: string
        } {
            return {
                title: this.isCancel ? `JAM维修-工单${this.item.id}-申请取消` : `JAM维修-工单${this.item.id}-申请转交`,
                button: {
                    ok: this.isCancel ? '#EC9D0B' : '#5BC6CA',
                    cancel: '#A1A1A1'
                },
                categoryText: this.isCancel ? '取消原因' : '转交原因'
            }
        },

        contents(): { [x: string]: any } {
            return this.item.contents;
        }
    },
    methods: {
        submitOrder() {
            if ((!this.info.reason || this.info.reason.length <= 0) && !this.info.reason_other) {
                Notify({ type: 'danger', message: '原因不能为空！' });
                return;
            }
            Dialog.confirm({
                title: '提示',
                message: `确认提交【${this.pageInfoProperty.title}】吗?`,
            }).then(() => {
                const reason = (this.info.reason || []).map((li: any) => {
                    return li?.content
                })
                console.log("🚀 ~ file: detail-reject.vue:94 ~ submitOrder ~ reason", reason)

                const params = {
                    id: this.item.id,
                    state: this.isCancel ? 1 : 2,
                    reason: reason,
                    reason_other: this.info.reason_other,
                }
                const method = PendingApi.postCancelOrTrans(params as PostCancelOrTrans)

                method.then((res: RequestCode) => {
                    Toast(this.isCancel ? '申请取消操作成功！' : '申请转单操作成功！');
                    setTimeout(() => {
                        this.goBackOrForward(-2, true);
                    }, 400)
                }).catch((error: any) => {
                    Notify({ type: 'danger', message: error.msg })
                })
            });
        },
        getReason() {
            PendingApi.getReason({
                kpi: 'Jam',
                type: this.isCancel ? '申请取消' : '申请转交'
            }).then((res: RequestCode) => {
                // Toast('提交成功！');
                this.info = res.data;
            }).catch(error => {
                Notify({ type: 'danger', message: error.message || error.msg });
            })
            //this.isCancel?
        }
    },
    created() {
        this.getReason();
    }
}
</script>

<style scoped lang="scss">
.reason-list {
    @extend .box-b, .p10;

    .item {
        @extend .f-b, .a-i-c;

        .label {
            color: rgba(16, 39, 90, 1);
            line-height: 32px;
        }

        .checked {}
    }
}
</style>